<template>
  <div class="body">
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" alt="" class="img_zuo" @click="back" />
        <div>{{super11}}点位巡查</div>
        <img src="../../assets/images/dwxc/dwpc_03.gif" alt="" class="img_jia2" @click="look">
        <img src="../../assets/images/dwxc/dwpc_06.gif" alt="" class="img_jia1" @click="query">
        <img src="../../assets/images/dwxc/dwpc_09.gif" alt="" class="img_jia" @click="add">
      </div>
    </header>
    <div class="main top">
      <div class="tjb">
        <table class="t1">
          <thead class="table_hj">
            <tr>
              <td colspan="7">
                <div class="thead_riqi">
                  <img src="../../assets/images/appa_r.png" class="img_z" @click="prev()" alt="">
                  <div class="time" data-time="timedata">{{time}}</div>
                  <img src="../../assets/images/appa_r.png" class="img_r" @click="next()" alt="">
                </div>
              </td>
            </tr>
            <tr>
              <td>日</td>
              <td>一</td>
              <td>二</td>
              <td>三</td>
              <td>四</td>
              <td>五</td>
              <td>六</td>
            </tr>
          </thead>
          <tbody class="tbody table1" v-html="html" @click="addComment($event)">
          </tbody>
        </table>
      </div>
    </div>
    <queryPopup :delivertk_show="tk_show" @receivetkshow="handletkshow" @receiveparameter="handleparameter">
    </queryPopup>
  </div>
</template>

<script>
  import "../../assets/css/dwxc_1_calendar.css"
  import queryPopup from "./queryPop-up.vue"
  import qs from 'qs';
  import terminal from "../../assets/js/terminal.js"
  export default {
    components: {
      queryPopup
    },
    name: 'dwxc_1_calendar',
    data() {
      return {
        day: 6,//当前月1号新期几
        // // daylist: [],
        // days: 31,//当月多少天
        // dayslist: [],
        // day_cunt: null,
        html: "",
        days: [
          { t_date: "2020-08-01", t_day: "1", t_state: 1 },
          { t_date: "2020-08-02", t_day: "2", t_state: 2 },
          { t_date: "2020-08-03", t_day: "3", t_state: 3 },
          { t_date: "2020-08-04", t_day: "4", t_state: 2 },
          { t_date: "2020-08-05", t_day: "5", t_state: 2 },
          { t_date: "2020-08-06", t_day: "6", t_state: 2 },
          { t_date: "2020-08-07", t_day: "7", t_state: 2 },
          { t_date: "2020-08-08", t_day: "8", t_state: 2 },
          { t_date: "2020-08-09", t_day: "9", t_state: 2 },
          { t_date: "2020-08-10", t_day: "10", t_state: 2 },
          { t_date: "2020-08-11", t_day: "11", t_state: 2 },
          { t_date: "2020-08-12", t_day: "12", t_state: 2 },
          { t_date: "2020-08-13", t_day: "13", t_state: 2 },
          { t_date: "2020-08-14", t_day: "14", t_state: 2 },
          { t_date: "2020-08-15", t_day: "15", t_state: 2 },
          { t_date: "2020-08-16", t_day: "16", t_state: 2 },
          { t_date: "2020-08-17", t_day: "17", t_state: 2 },
          { t_date: "2020-08-18", t_day: "18", t_state: 2 },
          { t_date: "2020-08-19", t_day: "19", t_state: 2 },
          { t_date: "2020-08-20", t_day: "20", t_state: 2 },
          { t_date: "2020-08-21", t_day: "21", t_state: 2 },
          { t_date: "2020-08-22", t_day: "22", t_state: 2 },
          { t_date: "2020-08-23", t_day: "23", t_state: 2 },
          { t_date: "2020-08-24", t_day: "24", t_state: 2 },
          { t_date: "2020-08-25", t_day: "25", t_state: 2 },
          { t_date: "2020-08-26", t_day: "26", t_state: 2 },
          { t_date: "2020-08-27", t_day: "27", t_state: 4 },
          { t_date: "2020-08-28", t_day: "28", t_state: 4 },
          { t_date: "2020-08-29", t_day: "29", t_state: 4 },
          { t_date: "2020-08-30", t_day: "30", t_state: 4 },
          { t_date: "2020-08-31", t_day: "31", t_state: 4 },
        ],
        time: "",
        timedata: "",
        tk_show: false,//是否显示弹框
        super11: "",
      }
    },
    mounted() {
      var _this = this;

    },

    //进入该页面时，用之前保存的滚动位置赋值
    methods: {
      //  返回
      back() {
        this.$router.back()
      },
      look() {
        this.$router.push("/dwxc_4_maplist")
      },
      query() {
        this.tk_show = true
      },
      add() {
        this.$router.push("/dwxc_2_Pointcreation")
      },
      handletkshow(bule) {//子组件返回的值是否显示弹框 
        this.tk_show = bule
      },
      handleparameter(obj) {
        console.log("接收的参数：", obj)
        var params = {
          userId: this.userid,
          mc: obj.name,
          zt: obj.state_text,
          beginDate: obj.start_time,
          endDate: obj.end_time,
          phone: localStorage.getItem("tel")
        }
        localStorage.setItem("dwxc_2_linelist_params", JSON.stringify(params))
        this.$router.push("/dwxc_2_linelist")
      },
      addComment(e) {
        console.log(e.target)
        var zt = Number($(e.target).attr("data-zt"))
        var sj = $(e.target).attr("data-sj")
        console.log(zt)
        console.log(sj)
        var params = {
          userId: this.userid,
          mc: "",
          zt: "",
          beginDate: sj,
          endDate: sj,
          phone: localStorage.getItem("tel")
        }
        localStorage.setItem("dwxc_2_linelist_params", JSON.stringify(params))
        this.$router.push("/dwxc_2_linelist")
        // if(zt !=1){
        // localStorage.setItem("anchor_name_dwxc_3", 1)
        // localStorage.setItem("chaxun_dwxc_3_sj", $(e.target).attr("data-sj"))
        // window.location.href = "./dwxc_3.html?id=" + dwid
      },
      prev() {
        var datatime = this.timedata
        var arr = datatime.split('/');
        var year = arr[0]; //获取当前日期的年份
        var month = arr[1]; //获取当前日期的月份

        var year2 = year;
        var month2 = parseInt(month) - 1;
        if (month2 == 0) {
          year2 = parseInt(year2) - 1;
          month2 = 12;
        }

        if (month2 < 10) month2 = "0" + month2;
        // $(".time").html(year2 + "年" + month2 + "月")
        // $(".time").attr("data-time", year2 + "/" + month2)
        this.time = year2 + "年" + month2 + "月"
        this.timedata = year2 + "/" + month2
        var date = year2 + "-" + month2
        var days = new Date(year2, month2, 0);
        days = days.getDate(); //获取当前日期中月的天数
        // console.log("天数：", days)
        var day = new Date(year2 + "/" + month2 + "/" + 1).getDay();//获取星期几
        // console.log(day)
        localStorage.setItem("dwxc_1_time", this.timedata)
        // inof(dwid, date, day)
        this.inof(date, day)
      },
      next() {

        var datatime = this.timedata
        console.log(datatime)
        var arr = datatime.split('/');
        var year = arr[0]; //获取当前日期的年份
        var month = arr[1]; //获取当前日期的月份
        var year2 = year;
        var month2 = parseInt(month) + 1;
        if (month2 == 13) {
          year2 = parseInt(year2) + 1;
          month2 = 1;
        }
        if (month2 < 10) month2 = "0" + month2;
        this.time = year2 + "年" + month2 + "月"
        this.timedata = year2 + "/" + month2
        console.log(this.timedata)
        var days = new Date(year2, month2, 0);
        days = days.getDate(); //获取当前日期中月的天数
        console.log("天数：", days)
        var date = year2 + "-" + month2
        var day = new Date(year2 + "/" + month2 + "/" + 1).getDay();//获取星期几
        console.log(day)
        localStorage.setItem("dwxc_1_time", this.timedata)
        // inof(dwid, date, day)
        this.inof(date, day)
      },
      Class(i) {
        i = i.t_state
        var dataclass = {
          1: "active1",//无巡查计划
          2: "active2",//有未完成巡查
          3: "active3",//已完成巡查
          4: "active4",//当日有未结束巡查
        }
        return dataclass[i]
      },
      tiemdate(days, day) {
        // console.log("天数：" + days, "星期：" + day)
        var _this = this
        var day_cunt = 1
        // console.log(day)
        this.html = ""
        var html = "<tr>"
        for (var ii = 1; ii <= day; ii++) {
          html += "<td></td>"
          day_cunt += 1
        }
        for (var i = 0; i < days.length; i++) {
          if (day_cunt % 7 == 1) {
            if (day_cunt < 7) {
              html += "<td class='" + _this.Class(days[i]) + "' data-zt='" + days[i].t_state + "' data-sj='" + days[i].t_date + "'  @click='btn_sj($event)'>" + days[i].t_day + "</td>"
            } else {
              html += "<tr>"
              html += "<td class='" + _this.Class(days[i]) + "' data-zt='" + days[i].t_state + "' data-sj='" + days[i].t_date + "' @click='btn_sj($event)'>" + days[i].t_day + "</td>"
            }
          } else if (day_cunt % 7 == 0) {
            html += "<td class='" + _this.Class(days[i]) + "' data-zt='" + days[i].t_state + "' data-sj='" + days[i].t_date + "' @click='btn_sj($event)'>" + days[i].t_day + "</td>"

            html += "</tr>"
          } else {
            html += "<td class='" + _this.Class(days[i]) + "' data-zt='" + days[i].t_state + "' data-sj='" + days[i].t_date + "' @click='btn_sj($event)'>" + days[i].t_day + "</td>"
            if (days[i].t_day == this.days[this.days.length - 1].t_day) {
              var fool_day = new Date(days[i].t_date).getDay()
              for (var ia = 0; ia < 5; ia++) {
                html += "<td></td>"
              }
            }
          }
          day_cunt += 1
        }
        this.html = html


      },
      getCurrentDate() {
        console.log("dwxc_1_time:", localStorage.getItem("dwxc_1_time"))
        var dwxc_1_time = localStorage.getItem("dwxc_1_time")
        if (!localStorage.getItem("dwxc_1_time")) {
          var now = new Date();
          var year = now.getFullYear(); //得到年份
          var month = now.getMonth();//得到月份
          month = month + 1;
          if (month < 10) month = "0" + month;
          localStorage.setItem("dwxc_1_time", year + "/" + month)
        } else {
          var arr = dwxc_1_time.split('/');
          var year = arr[0]; //获取当前日期的年份
          var month = arr[1]; //获取当前日期的月份
        }

        this.time = year + "年" + month + "月"
        this.timedata = year + "/" + month
        var date = year + "-" + month
        var days = new Date(year, month, 0);
        days = days.getDate(); //获取当前日期中月的天数
        var day = new Date(year + "/" + month + "/" + 1).getDay();//获取星期几
        this.inof(date, day)

      },
      inof(date, day) {//获取日历
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log("plus问题");
        }
        var params = {
          userId: this.userid,
          date: date
        }
        this.axios
          .post(
            `${this.$global_msg.Url.host}/DotPlacePatrol/SpotInspectionRecordCalendarView`, qs.stringify(params)
          )
          .then((res) => {
            try {
              plus.nativeUI.closeWaiting();
            } catch (e) {
              console.log("plus问题");
            }
            console.log("日期：", res);
            if (res.data.code == 0) {
              this.tiemdate(res.data.rows, day)
            } else {
              this.$toast(res.data.msg);
            }
          }).catch(err=>{
              this.$terminal._error(err)
          })
      },


    },
    created() {
      this.userid = localStorage.getItem("userId")
      this.super11 = localStorage.getItem("super")
      this.getCurrentDate()

      // console.log(6 % 7)
    },
    // beforeRouteEnter(to, from, next) {
    //   next((vm) => {
    //     console.log(11234 )
    //     if (from.path == "/index") {
    //       localStorage.setItem("dwxc_1_time","")
    //       vm.userid = localStorage.getItem("userId")
    //       vm.super11 = localStorage.getItem("super")
    //       vm.getCurrentDate()
    //     }

    //   });
    // }

  }
</script>

<style scoped>
  /* 头部 */
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    width: 100%;
    z-index: 20;
    font-size: 0.388888rem;
    position: fixed;
    top: 0;
    left: 0;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }

  .img_jia {
    width: 0.4444rem;
    position: absolute;
    right: 0.3704rem;
  }

  .img_jia1 {
    width: 0.4444rem;
    position: absolute;
    right: 1.1852rem;
  }

  .img_jia2 {
    width: 0.4444rem;
    position: absolute;
    right: 1.9259rem;
  }

  /* 表格 */
  .main {
    padding-top: 0.0185rem;
  }

  .top {
    margin-top: 1.8519rem;
  }

  .t1 {
    width: 100%;
    border-collapse: collapse;
  }

  .tjb {
    margin-top: 0.1852rem;
    border-radius: 0.1111rem;
    overflow: hidden;
  }

  .table_hj td {
    border: 1px solid #F2F2F2;
    height: 1.1111rem;
    font-size: 0.3333rem;
    box-sizing: border-box;
    color: #000;
    text-align: center;
    /* font-weight: 600; */
  }

  .table1 td {
    border: 1px solid #F2F2F2;
    height: 1.1111rem;
    font-size: 0.3333rem;
    box-sizing: border-box;
    color: #000;
    text-align: center;

  }

  .thead_riqi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.3704rem;
  }

  .thead_riqi>span {
    color: #CBCBCB;
    padding: 0 0.1852rem;
  }



  .isShow {
    display: none;
  }

  .img_r {
    width: 0.4444rem;
    height: 0.4444rem;
  }

  .img_z {
    width: 0.4444rem;
    height: 0.4444rem;
    transform: rotate(180deg);
  }
</style>